<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" v-model="keyword">
        <button @click="sortNum=1">年龄升序</button>
        <button @click="sortNum=2">年龄降序</button>
        <button @click="sortNum=0">年龄原序</button>
        <ul>
            <li v-for="p in persion" :key="p.id">{{p.name}}-{{p.age}}</li>
        </ul>
    </div>
    
    <script type="text/javascript">
        new Vue({
            el:"#root",
            data:{
                sortNum:0,
                keyword:'',
                persons:[
                    {id:1,name:'周冬雨',age:18},
                    {id:2,name:'马冬梅',age:19},
                    {id:3,name:'周杰伦',age:12},
                    {id:4,name:'李伦伦',age:30}
                ]
            },
            computed:{
                persion(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyword)!==-1;
                    })
                    if(this.sortNum){
                        arr.sort((p1,p2)=>{
                            return this.sortNum === 1 ? p1.age - p2.age : p2.age - p1.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>
</body>
</html>